<template>
  <div class="main">
    <page-layout>
      <div slot="headerContent">
        <div class="title">{{ welcome.timeFix }}，{{ currUser.name }}!</div>
        <div>让我们以代码敲击梦想~</div>
      </div>
      <template slot="extra" v-if="num">
        <head-info class="split-right" title="项目数" :content="num" />
      </template>
    </page-layout>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :rowKey="(record) => record.id"
    >
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" @click="onChange(record)">查看</a-button>
      </span>
    </a-table>

    <a-modal
      title="查看选中项目："
      v-model="visible"
      :footer="null"
      :centered="true"
      width="400px"
    >
      <a-timeline mode="alternate">
        <a-timeline-item
          v-for="ele in part"
          :key="ele.value"
          @click="showPart(ele.value)"
          >{{ ele.label }}</a-timeline-item
        >
      </a-timeline>
    </a-modal>
    <div class="bottom" v-if="num">
      <a-pagination
        class="pageTab"
        :current="current"
        :page-size-options="pageSizeOptions"
        :total="num"
        :show-total="(total) => `共 ${num} 条`"
        :page-size="limit"
        :default-current="1"
        show-size-changer
        @showSizeChange="onShowSizeChange"
        @change="pageChange"
      />
      <a-button type="primary" @click="back"
        ><a-icon type="rollback" />返回班级</a-button
      >
    </div>
  </div>
</template>

<script>
import PageLayout from '@/layouts/PageLayout';
import HeadInfo from '@/components/tool/HeadInfo';
import {
  getAdminProjectApi,
  getProjectByGradeApi,
} from '@/services/superAdmin';
import { mapState, mapGetters, mapMutations } from 'vuex';

const timeList = ['早上好', '上午好', '中午好', '下午好', '晚上好'];

export default {
  components: {
    PageLayout,
    HeadInfo,
  },
  data() {
    return {
      columnsStudent: [
        {
          title: '学员id',
          dataIndex: 'id',
          key: 'id',
          align: 'center',
        },
        {
          title: '学员昵称',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
        },
        {
          title: '项目id',
          dataIndex: 'Projects[0].id',
          key: 'Projects[0].id',
          align: 'center',
        },
        {
          title: '项目名',
          dataIndex: 'Projects[0].name',
          key: 'Projects[0].name',
          align: 'center',
        },
        {
          title: '注册手机号',
          dataIndex: 'phone',
          key: 'phone',
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          key: 'action',
          align: 'center',
        },
      ],
      columnsClass: [
        {
          title: '班级',
          dataIndex: 'grade',
          key: 'grade',
          align: 'center',
        },
        {
          title: '主讲',
          dataIndex: 'lecturer',
          key: 'lecturer',
          align: 'center',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          key: 'action',
          align: 'center',
        },
      ],
      classList: [
        { id: 40, lecturer: '俊言', grade: '40班' },
        { id: 41, lecturer: 'Melon', grade: '41班' },
        { id: 42, lecturer: 'Jack', grade: '42班' },
      ],
      projectList: [],
      adminInfo: {},
      num: 0,
      pageSizeOptions: ['10', '15', '20', '25'], //每页显示数选择
      current: 1, //当前页面
      limit: 10, //每页多少条
      selectedId: '', //所选项目id
      welcome: {
        timeFix: '',
        message: '',
      },
      visible: false,
      part: [
        {
          label: '轮播图',
          value: 'CarouselGroups',
          path: '/carousel/adminCarousel',
        },
        { label: '关于我们', value: 'AboutUs', path: '/aboutUs/admin' },
        { label: '人物管理', value: 'Characters', path: '/characters/admin' },
        { label: '案例管理', value: 'Cases', path: '/case/admin' },
        { label: '新闻管理', value: 'News', path: '/news/admin' },
        { label: '招聘管理', value: 'Recruits', path: '/recruit/admin' },
      ],
      currentProjectData: {},
      dataSource: [],
      columns: [],
      grade: '',
    };
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapGetters('account', ['user']),
  },
  async created() {
    this.adminInfo = this.user;
    this.welcome.timeFix = this.timeFix();
    this.columns = this.columnsClass;
    this.dataSource = this.classList;
  },
  methods: {
    ...mapMutations('account', ['setUser']),
    showPart(part) {
      if (this.currentProjectData[part].length == 0) {
        this.$message.error('尚无数据');
      } else {
        let path = this.part.filter((ele) => ele.value == part)[0].path;
        this.$router.push({
          path,
          query: { id: this.selectedId },
        });
      }
    },
    // 返回班级
    back() {
      this.columns = this.columnsClass;
      this.dataSource = this.classList;
      this.num = '';
      this.current = 1;
    },
    // 更改当前查看班级或项目
    onChange(record) {
      if (this.columns == this.columnsClass) {
        this.grade = record.id;
        this.getProjectByGrade();
      } else {
        this.selectedId = record.Projects[0].id;
        this.visible = true;
        this.getAdminProject();
      }
    },
    async getProjectByGrade(limit = 10, offset = 0) {
      let res = await getProjectByGradeApi({
        grade: this.grade,
        limit,
        offset,
      });
      this.num = res.data.count;
      this.projectList = res.data.rows;
      this.columns = this.columnsStudent;
      this.dataSource = this.projectList;
    },
    // 根据项目id获取所有信息
    getAdminProject() {
      getAdminProjectApi({ id: this.selectedId }).then((res) => {
        this.currentProjectData = res.data;
      });
    },
    timeFix() {
      const time = new Date();
      const hour = time.getHours();
      return hour < 9
        ? timeList[0]
        : hour <= 11
        ? timeList[1]
        : hour <= 13
        ? timeList[2]
        : hour <= 20
        ? timeList[3]
        : timeList[4];
    },
    // 分页
    onShowSizeChange(current, pageSize) {
      this.limit = pageSize;
      this.pageChange(current);
    },
    pageChange(current) {
      this.current = current;
      let offset = (this.current - 1) * this.limit;
      this.getProjectByGrade(this.limit, offset);
    },
  },
};
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  .pageTab {
    text-align: center;
  }
}
::v-deep .ant-select-selection {
  border-radius: 0;
  margin-bottom: 10px;
}

::v-deep .ant-table-body {
  background-color: white;
}

::v-deep .ant-select-selection {
  margin-top: 10px;
}

::v-deep .ant-timeline-item-content {
  cursor: pointer;
}
</style>
